<template>
    <div class="message-info warp-2 body-content" style="height: 100%;">
        <navbar :title="$t('message_info')"></navbar>
        <div class="message-top">
            <!-- 课程-公开 -->
            <router-link v-if="message.wmsgType === 'Course' && message.courseType === 'AUDIOVIDEO'" :to="'/publicClass/openDetail/' + message.wmsgMtpId">
                <div class="message-title">{{ message.wmsgSubject }}</div>
            </router-link>
            <!-- 课程-面授 -->
            <router-link v-else-if="message.wmsgType === 'Course' && message.courseType === 'CLASSROOM'" :to="'/course/' + message.wmsgMtpId + '/0'">
                <div class="message-title">{{ message.wmsgSubject }}</div>
            </router-link>
            <!-- 课程-网上 -->
            <router-link v-else-if="message.wmsgType === 'Course' && message.courseType === 'SELFSTUDY'" :to="'/course/' + message.wmsgMtpId + '/0'">
                <div class="message-title">{{ message.wmsgSubject }}</div>
            </router-link>
            <!-- 课程-项目式 -->
            <router-link v-else-if="message.wmsgType === 'Course' && message.courseType === 'INTEGRATED'" :to="'/course/' + message.wmsgMtpId + '/0'">
                <div class="message-title">{{ message.wmsgSubject }}</div>
            </router-link>
            <!-- 课程-游戏 -->
            <router-link v-else-if="message.wmsgType === 'Course' && message.courseType === 'MAP'" :to="{path:'/studyMapDetail', query: {itmId:message.wmsgMtpId}}">
                <div class="message-title">{{ message.wmsgSubject }}</div>
            </router-link>
            <!-- 知识库 -->
            <router-link v-else-if="message.wmsgType === 'Knowledge' && message.knowledgeSourceType === 0" :to="'/knowledgeDetail/' + message.wmsgMtpId">
                <div class="message-title">{{ message.wmsgSubject }}</div>
            </router-link>
            <!-- 问答 -->
            <router-link v-else-if="message.wmsgType === 'Question'" :to="'/knowDetail/UNSOLVED/' + message.wmsgMtpId">
                <div class="message-title">{{ message.wmsgSubject }}</div>
            </router-link>
            <!-- 工作圈-话题 -->
            <router-link v-else-if="message.wmsgType === 'Topic'  && message.wcId !== null" :to="{path:'/circle/topic/detail', query: {id:message.wmsgMtpId, circleId: message.wcId}}">
                <div class="message-title">{{ message.wmsgSubject }}</div>
            </router-link>
            <!-- 工作圈-知识 -->
            <router-link v-else-if="message.wmsgType === 'Knowledge' && message.knowledgeSourceType === 1" :to="'/circle/knowledge/knowledgeInfo/' + message.wmsgMtpId + '/' + message.knowledgeType">
                <div class="message-title">{{ message.wmsgSubject }}</div>
            </router-link>
            <div class="message-title" v-else>{{ message.wmsgSubject }}</div>
            <div class="message-detail">
                <div>{{ $t('message_resource', {'value': message.wmsgCreateName}) }}</div>
                <div>{{ message.wmsgCreateTimestamp }}</div>
            </div>
        </div>
        <div class="message-content" v-html="message.wmsgContentMobile"></div>
    </div>
</template>

<script>
import { Toast } from 'vant';
export default {
    name: 'NewMessageDetail',
    components: {
        vanToast: Toast
    },
    data() {
        return {
            msgId: 0,
            message: {},
            isRead: false
        };
    },
    methods: {
        clicked(url) {
            this.$router.push(url);
        },
        back() {
            this.$router.replace({path: '/messageNotification'});
        },
        getMessageInfo() {
            if (this.msgId > 0) {
                this.$axios({
                    method: 'GET',
                    url: `/app/api/trainee/my/message/web-message/detail/${this.msgId}`
                }).then(res => {
                    this.message = res.data;
                });
                if (!this.isRead) {
                    this.$axios({
                        method: 'POST',
                        url: `/app/api/trainee/my/message/web-message/status`,
                        data: {
                            wmrhWmsgIdStr: this.msgId.toString()
                        }
                    });
                }
            }
        }
    },
    mounted() {
        window.clicked = (url) => {
            this.clicked(url);
        };
    },
    created() {
        this.msgId = this.$route.params.msgId;
        this.isRead = this.$route.params.isRead === '1';
        this.getMessageInfo();
    }
};
</script>

<style scoped lang="less">
    .message-info {
        background: #fff;
        .message-top {
            padding: 76px 15px 10px 15px;
            background: #fff;
            .message-title {
                font-size: 18px;
                margin-bottom: 15px;
            }
            .message-detail {
                font-size: 14px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                color: #999;
                border-bottom: 1px #ccc dashed;
                padding-bottom: 15px;
            }
        }
        /deep/.message-content {
            font-size: 16px;
            padding: 0 15px;
            img{
                width: 100%;
            }
        }
    }
</style>
